import React, { useState, useEffect } from "react";
import "../static/css/ArticleList.css";
import { List, Row, Col, Modal, message, Button, Switch } from "antd";
import axios from "axios";
import { formatStamp, timesago } from "../filters/index"
import servicePath from "../config/apiUrl";
const { confirm } = Modal;

function ArticleList(props) {
  const [list, setList] = useState([])
  const [loading, setLoading] = useState(false)
  //得到文章列表
  const getList = () => {
    setLoading(true)
    axios({
      method: "get",
      url: servicePath.getArticleList,
      withCredentials: false,
      header: { "Access-Control-Allow-Origin": "*" }
    }).then(res => {
      let dataList = res.data.list
      axios({
        method: "get",
        url: servicePath.getTypeInfo,
        header: { "Access-Control-Allow-Origin": "*" },
        withCredentials: false
      }).then(res => {
        // console.log('0000000000',res);
        setLoading(false)
        dataList.map(data => {
          // console.log('ddddd000',data);
          res.data.data.map(datas => {
            if (data.type_id === datas.id) {
              data.typeName = datas.typeName
            }
          })
        })

        setList(dataList);
      }).catch((err)=>{
        message.error(err.response.data.data)
        if(err.response.status === 401){
          props.history.push("/login")
        }
        setLoading(false)
      })

    }).catch((err)=>{
      message.error(err.response.data.data)
      if(err.response.status === 401){
        props.history.push("/login")
      }
      setLoading(false)
    })
  };
  //修改文章
  const updateArticle = (info) => {
    // props.history.push("/index/add/" + id);
    props.history.push({
      pathname:"/index/add/" + info.id,
      typeName: info
    })
  };
  useEffect(() => {
    getList();
    // console.log('list',props.match);
    // useEffect(() => {
    // getTypeInfo();
    // //获得文章ID
    // let tmpId = props.match.params.id
    // if(tmpId){
    //   // console.log(tmpId,"tmpId");

    //     setArticleId(tmpId)
    //     getArticleById(tmpId)
    // } 
    // }, []);
  }, []);
  //删除文章的方法
  const delArticle = id => {
    confirm({
      title: "确定要删除这篇博客文章吗?",
      content: "如果你点击OK按钮，文章将会永远被删除，无法恢复。",
      onOk() {
        axios(servicePath.delArticle + id, { withCredentials: false }).then(
          res => {
            message.success("文章删除成功");
            getList();
          }
        ).catch((err)=>{
          message.error(err.response.data.data)
          if(err.response.status === 401){
            props.history.push("/login")
          }
          setLoading(false)
        })
      },
      onCancel() {
        message.success("没有任何改变");
      }
    });
  };
  return (
    <div>
      <List
        loading={ loading }
        header={
          <Row className="list-div">
            <Col span={5}>
              <b>标题</b>
            </Col>
            <Col span={3}>
              <b>类别</b>
            </Col>
            <Col span={3}>
              <b>集数</b>
            </Col>
            <Col span={3}>
              <b>浏览量</b>
            </Col>
            <Col span={3}>
              <b>发布时间</b>
            </Col>
            <Col span={3}>
              <b>更新时间</b>
            </Col>
            <Col span={4}>
              <b>操作</b>
            </Col>
          </Row>
        }
        bordered
        dataSource={list}
        renderItem={item => (
          <List.Item>
            <Row className="list-div">
              <Col span={5}>{item.title}</Col>
              <Col span={3}>{item.typeName}</Col>
              <Col span={3}>
                共<span>{item.article_count ? item.article_count : 0}</span>集
              </Col>
              <Col span={3}>{item.view_count}</Col>
              <Col span={3}>{formatStamp(item.addTime)}</Col>
              <Col span={3}>{item.updateTime?timesago(item.updateTime):"未更新"}</Col>

              <Col span={4}>
                <Button type="link" onClick={() => {
                  updateArticle(item)
                }}>修改</Button>&nbsp;
                <Button
                  type="link"
                  danger
                  onClick={() => {
                    delArticle(item.id);
                  }}
                >
                  删除{" "}
                </Button>
              </Col>
            </Row>
          </List.Item>
        )}
      />
    </div>
  );
}

export default ArticleList;
